<!-- 咨询回复弹窗 -->
<template>
  <div>
    <el-dialog class="replyDiv" :visible.sync="visible" @close="closeDialog">
      <span slot="title">
        <p class="title_p">回复详情</p>
        <el-divider />
      </span>
      <div class="rowData">
        <h4>{{ currentData.content }}</h4><br />
        <p>咨询商品：{{ currentData.spData }}</p>
        <p>咨询时间：{{ currentData.createTime }}</p>
        <span style="margin-right: 35px;">咨询人：{{ currentData.seekAdviceNickname }}</span>
        <span>联系人电话：{{ currentData.telephone }}</span>
        <el-divider />
      </div>
      <div class="listData" v-for="(item, index) in listData" :key="index">
        <div class="top">
          <div class="topLeft">回复</div>
          <span class="topRight">{{ formatData(item.createTime) }}</span>
        </div>
        <div class="bottom">
          {{ item.replayContent }}
        </div>
      </div>
      <!-- <span slot="footer" class="dialog-footer">
        <el-pagination background layout="->,prev, pager,next" :page-size="5" :total="listData"
          @current-change="handleCurrentChange" style="margin-top: 5px;" />
      </span> -->
    </el-dialog>
  </div>
</template>

<script>
import { getAllreply } from '@/api/api';
export default {
  data() {
    return {
      currentData: {},
      listData: {},
      currentpageNumber: 0,
    }
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    Data: {
      type: Object,
      required: true // 如果Data是必须的，请添加required属性  
    }
  },
  watch: {
    Data(newVal) {
      if (newVal) {
        this.getAllReplyList(1)
        this.currentpageNumber = 1
      }
    }
  },
  methods: {
    async getAllReplyList() {
      this.currentData = this.Data;
      try {
        const res = await getAllreply(this.Data.id)
        if (res.data.code == 200) {
          this.listData = res.data.result
        }
      } catch (error) {
        console.log(error)
      }
    },
    formatData(timestamp) {
      // 确保 timestamp 是数字，并转换为毫秒（如果它是秒）  
      if (typeof timestamp === 'string') {
        timestamp = Number(timestamp);
      }

      // 创建一个新的 Date 对象  
      var date = new Date(timestamp);

      // 检查 date 是否有效  
      if (!Number.isNaN(date.getTime())) {
        let Y = date.getFullYear() + '-';
        let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        let D = date.getDate() + '';
        let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
        let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
        let s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
        return Y + M + D + " " + h + m + s;
      } else {
        // 如果 timestamp 无效，返回错误消息  
        return 'Invalid timestamp';
      }
    },
    closeDialog() {
      // 触发一个名为 'update-visible' 的事件，并传递新值  
      this.$emit('update-visible', false);
    },
    // handleCurrentChange(val) {
    //   this.getAllProductsList(val)
    //   this.currentpageNumber = val
    // },
  }

}
</script>
<style scoped>
.el-dialog__wrapper>>>.el-dialog {
  min-width: 200px;
  min-height: 550px;
  border-radius: 0;
}

.replyDiv>>>.el-dialog {
  width: 35%;
}

.replyDiv>>>.el-dialog__header {
  height: 35px;
  padding: 3% 0 0 1%;
}

.replyDiv>>>.el-dialog__body {
  padding: 1% 0 0 2%;
}

.title_p {
  font-size: 14px;
  font-weight: 450;
  margin-left: 0.5%;
}

.el-divider--horizontal {
  height: 0px;
  width: 98%;
  border: 1px solid rgba(235, 238, 242, 1);
  margin: 1.3% 0;
}

.rowData {
  color: gray;
}

.top {
  /* 顶部区域，使用 flex 布局来水平排列子元素 */
  display: flex;
  justify-content: left;
  align-items: center;
  /* 垂直居中 topLeft 和 topRight */
}

.topLeft {
  width: 32px;
  height: 22px;
  text-align: center;
  border-radius: 2px;
  color: white;
  background-color: gray;
  margin-right: 10px;
}



.listData {
  width: 99%;
  margin: 20px 0;
}
</style>
